<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>接口文档【{$pro_name}】</title>
    <link href="{:base_url()}Public/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="{:base_url()}Public/css/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="{:base_url()}Public/js/jquery1.9.1.min.js"></script>
    <script type="text/javascript" src="{:base_url()}Public/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="{:base_url()}Public/newpage/layer/layer.js"></script>
    <style type="text/css">
        body {
            min-width: 327px;
        }

        .header {
            width: 100%;
            background: url('{:base_url()}Public/images/doc1.png') no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #fff;
            font-size: 3rem;
            font-weight: bold;
            padding: 20px;
        }

        .header a {
            font-size: 20px;
        }

        .content {
            float: right;
            padding-left: 10%;
        }

        .btn-group {
            width: 100%;
        }

        .row {
            margin-top: 20px;
        }

        .btn-group button {
            margin-bottom: 2px;
        }

        .level2 {
            width: 100%;
            background: #fff;
            padding: 10px;
            /*display: none;*/
        }

        .level2 a {
            display: block;
            width: 100%;
            text-align: center;
            padding: 4px 0px;
            text-decoration: none;
        }

        .level2 a:hover {
            cursor: pointer;
            background: #eee;
        }

        .item {
            margin: 20px 0px 100px 0px;
        }

        .item h4 {
            margin: 20px 0px;
            font-weight: bold;
        }

        .item .title {
            font-weight: bold;
            word-break: break-all;
            word-wrap: break-word;
        }

        .item-div {
            margin: 10px 0px;
        }

        table tr:hover {
            background: #eee;
        }

        /*搜索结果*/
        #search_ret {
            width: 100%;
            /*padding: 2rem;*/
            text-align: center;
            background: #fff;
            -webkit-box-shadow: 1px 1px 1px 1px #929292;
            -moz-box-shadow: 1px 1px 1px 1px #929292;
            box-shadow: 1px 1px 1px 1px #929292;
            display: none;
        }

        #search_ret .category {
            margin-right: 1rem;
        }

        #search_ret .api {
            margin-left: 1rem;
        }
    </style>
</head>
<body>
<!--等待提示-->
<div id="waiting"
     style="display: none;width: 100%;background:rgba(100,100,100,0.3);height: 100%;z-index: 2000;position:absolute;top:0px;text-align: center;">
    <i style="font-size:4em;margin-top:25%;" class="fa fa-spinner fa-pulse fa-fw margin-bottom"></i>
</div>
<div class="header">
    {$pro_name}
    <a href="{:U('Index/index')}" class="manage">项目列表</a>
    <a href="{:U('Doc/index')}?proid={$proid}" class="manage">接口列表</a>
    <if condition="($admin_user.edit_permission eq 1) or ($admin_user.type eq 0)">
        <a href="{:U('Doc/editApi')}?proid={$proid}" class="manage">添加接口</a>
        <a href="{:U('Doc/typelist')}?proid={$proid}" class="manage">分类管理</a>
        <a href="{:U('Doc/exportWord')}?proid={$proid}">下载</a>
    </if>
    <input type="text" id="search" data-id="{$proid}" class="form-control" style="width: 200px;float: right;"
           placeholder="输入关键字回车搜索">
</div>
<!--弹框提示-->
<div id="pop" class="alert alert-warning" style="text-align: center;display: none;">
    <a href="#" class="close" data-dismiss="alert">
        &times;
    </a>
    <strong class="msgcontent">警告！</strong>
</div>
<div id="search_ret" class="panel panel-default">
    <div class="panel-heading close_parent">
        <h3 class="panel-title" title="关闭" style="cursor: pointer;">
            搜索结果<span class="close_mark" style="float: right;font-size: 2rem;">&times;</span>
        </h3>
    </div>
    <div class="panel-body">
        <table style="width: 100%" class="ret_box">

        </table>
    </div>
</div>
<!--模板-->
<div id="tpl" style="display: none">
    <table style="width: 100%" id="search_ret_box">
        <tbody>
        <tr class="retitem">
            <td style="text-align: right;width: 50%;"><b class="category">ee</b>></td>
            <td style="text-align: left;width: 50%;"><a class="api">ere</a></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    $(document).ready(function () {
        $('.close_parent').hover(function () {
            $('.close_mark').css({'color': '#f00'});
        }, function () {
            $('.close_mark').css({'color': '#000'});
        });

        $('#search').keyup(function (e) {
            if (e.keyCode == 13) {
                //搜索接口
                $('.ret_box').children().remove();
                var data = {proid: $(this).attr('data-id'), keyword: $(this).val()};
                $.post('{:U("Doc/searchApi")}', data, function (ret) {
                    if (ret.status != 200) {
                        PopMsg(ret.message, 1);
                        $('#search_ret').hide();
                    } else {
                        var retData = ret.show_data;
                        for (var i = 0; i < retData.length; i++) {
                            var tpl = $('#search_ret_box .retitem').clone(true);
                            tpl.find('.category').text(retData[i].t_name);
                            tpl.find('.api').text(retData[i].title);
                            tpl.find('.api').attr('href', '{:U("Doc/index")}?id=' + retData[i].id + '&proid=' + retData[i].proid);
                            $('.ret_box').append(tpl);
                            $('#search_ret').show();
                        }
                    }
                }, 'json');
            }
        });
        $('.close_parent').click(function () {
            $(this).parent().slideUp();
        });

    });

    /*弹框提示显示2秒后隐藏*/
    function PopMsg(content, second) {
        $('#pop').find('.msgcontent').text(content);
        $('#pop').fadeIn();
        setTimeout(function () {
            $('#pop').fadeOut();
        }, second * 1000);
    }
</script>
</body>
</html>